---
section: Backgrounds
title: Gradient Color Stops
slug: /docs/gradient-color-stops/
---

# Gradient Color Stops

Utilities for controlling the color stops in background gradients.

<carbon-ad />

| React props            | CSS Properties                                                                                                      |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `gradientFrom={color}` | `--x-gradient-from: {color};`<br />`--x-gradient-stops: var(--x-gradient-from), var(--x-gradient-to, transparent);` |
| `gradientVia={color}`  | `--x-gradient-stops: var(--x-gradient-from), {color}, var(--x-gradient-to, transparent);`                           |
| `gradientTo={color}`   | `--x-gradient-to: {color};`                                                                                         |

## Starting color

Set the starting color of a gradient using the `gradientFrom={color}` utilities.

```jsx preview
<>
  <template preview>
    <x.div h={24} backgroundImage="gradient-to-r" gradientFrom="red-500" />
  </template>
  <x.div backgroundImage="gradient-to-r" gradientFrom="red-500" />
</>
```

Gradients fade out to transparent by default.

## Ending color

Set the ending color of a gradient using the `gradientTo={color}` utilities.

```jsx preview
<>
  <template preview>
    <x.div
      h={24}
      backgroundImage="gradient-to-r"
      gradientFrom="teal-400"
      gradientTo="blue-500"
    />
  </template>
  <x.div
    backgroundImage="gradient-to-r"
    gradientFrom="teal-400"
    gradientTo="blue-500"
  />
</>
```

Gradients to **do not** fade in from transparent by default. To fade in from transparent, reverse the gradient direction and use a `gradientFrom={color}` utility.

## Middle color

Add a middle color to a gradient using the `gradientVia={color}` utilities.

```jsx preview
<>
  <template preview>
    <x.div
      h={24}
      backgroundImage="gradient-to-r"
      gradientFrom="purple-400"
      gradientVia="pink-500"
      gradientTo="red-500"
    />
  </template>
  <x.div
    backgroundImage="gradient-to-r"
    gradientFrom="purple-400"
    gradientVia="pink-500"
    gradientTo="red-500"
  />
</>
```

Gradients with a `gradientFrom={color}` and `gradientVia={color}` will fade out to transparent by default if no `gradientTo={color}` is present.

## Responsive

To control the gradient color stops of an element at a specific breakpoint, use responsive object notation. For example, adding the property `gradientFrom={{ md: "red-500" }}` to an element would apply the `gradientFrom="red-500"` utility at medium screen sizes and above.

```jsx
<x.div gradientFrom={{ md: 'red-500' }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

import CustomizeColors from '../../../partials/customizing/colors.mdx'

<CustomizeColors />
